import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import "../../styles/My.scss"
import { UnorderedListOutline, SetOutline } from 'antd-mobile-icons'
import * as service from "../../api/index"

class My extends Component {

    state = {
        one: [],
        wenda: []
    }
    async componentDidMount() {
        //下面盒子
        var res = await service.gong_xia()
        console.log(res.data.list[0]);
        this.setState({ one: res.data.list[0] },)

        //攻略问答
        var res1 = await service.my_wenda()
        console.log(res1.data.list);
        this.setState({ wenda: res1.data.list },)
    }

    render() {
        var { pic, dizhi, jieshao, title, name } = this.state.one

        return (
            <div className='my'>
                <div className="top">
                    <NavBar back={<UnorderedListOutline />} right={<SetOutline />} backArrow={false}>
                        我的
                    </NavBar>
                </div>
                <div className="text">
                    <div className="zhong">
                        <img src="https://cdn7.axureshop.com/demo/1212098/images/%E6%88%91%E7%9A%84/u5372.png" alt="" />
                        <h4>西瓜</h4>
                        <p>世界那么大，我想出去走走</p>
                    </div>
                    <div className="guanzhu">
                        <div className="box">
                            <p>321K</p>
                            <p>关注</p>
                        </div>
                        <div className="box">
                            <p>298</p>
                            <p>粉丝</p>
                        </div>
                        <div className="box">
                            <p>438</p>
                            <p>经验值</p>
                        </div>
                        <div className="box">
                            <span>我的订单</span>
                        </div>
                    </div>
                    <div className="lvyou">
                        <div className="top">
                            <h2>旅游攻略</h2>
                            <p onClick={() => { this.props.history.push('/quanbugonglue') }}>查看全部</p>
                        </div>
                        <div className="xia_box">
                            <div className="zuo">
                                <img src={pic} alt="" />
                            </div>
                            <div className="you">
                                <h4>{dizhi} | {title}</h4>
                                <p>{jieshao}</p>
                                <p>{name}</p>
                            </div>
                        </div>

                    </div>
                    <div className="shouji">
                        <div className="top">
                            <h2>旅行手记</h2>
                            <p onClick={() => { this.props.history.push('/quanbushouji') }}>查看全部</p>
                        </div>
                        <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1852.png" alt="" />
                        <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1851.png" alt="" />
                        <img src="https://cdn7.axureshop.com/demo/1212098/images/%E7%94%A8%E6%88%B7%E4%B8%AD%E5%BF%83/u1850.png" alt="" />
                    </div>
                    <div className="mywenda">
                        <h2>我的问答</h2>
                        <div className="wenda">
                            {
                                this.state.wenda.map((item, index) => {
                                    return (
                                        <div className="wenda_one" key={index}>
                                            <h3>{item.name}</h3>
                                            <div className="hhh">
                                                <h4>{item.shuoming}</h4>
                                                <span onClick={() => { this.props.history.push('/xingcheng') }}>{item.xingcheng}</span>
                                                <div className="xia">
                                                    <p>{item.time}</p>
                                                    <p>{item.msg}</p>
                                                </div>
                                            </div>

                                        </div>
                                    )
                                })
                            }

                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default My;